<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign in</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .container {
            height: 100%;
            background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
        }
        .login-wrapper {
            background-color: #fff;
            width: 358px;
            height: 588px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .header {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
        }
        .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }
        .input-item:placeholder {
            text-transform: uppercase;
        }
        .btn {
            text-align: center;
            padding: 10px;
            width: 100%;
            margin-top: 40px;
            background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
            color: #fff;
        }
        .msg {
            text-align: center;
            line-height: 88px;
        }
        a {
            text-decoration-line: none;
            color: #abc1ee;
        }
		.code-panel{
			display: block;
            width: 100%;
		}
		.captcha{
            width: 50%;
			border: 0;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
			padding: 10px;
            outline: none;
		}
		.vcode{
			float: right;
			height: 42px;
			width: 40%;
			border: 0;
			background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
            color: #fff;
			text-align:center;
		}
		.notice{
			border-bottom: 1px solid red;
		}
		.hidden{
			display: none;
		}
    </style>
</head>
<script src="js/jquery.min.js"></script>
<script src="js/config.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var url = getUrlParam('url');

	  $("#login").click(function(){
			var username = $("#username").val(),password = $("#password").val(),captcha = $("#captcha").val(),vkey = $("#vkey").val(); 
			if(check_null('username')&&check_null('password')&&check_null('captcha')&&check_null('vkey'))
			{
				var params = {'adminname':username,'password':password,'captcha':captcha,'vkey':vkey};
				//远程接口调用
				$.ajax({
				  url: 'api/api_saas.php',
				  data: {type:'reg',data:JSON.stringify(params)},
				  success: function(res){
					  var result = $.parseJSON(res);
					  if(result.code==200){
						  var token = result.data.token;
						  //跳转列表页
						  window.location.href = "lst.html?url="+url+"&token="+token;
					  }else{
						  alert(result.msg);
					  }
				  }
				});
			}
			else
		    {
				alert('必填项不能为空');
		    }
	  });

	  $("#vcode").click(function(){
			var username = $("#username").val()
			if(username.length>0)
			{
				var params = {'phone':username};
				//远程接口调用
				$.ajax({
				  url: host_url+'api/api_saas.php',
				  data: {type:'get_phone_vcode',data:JSON.stringify(params)},
				  success: function(res){
					  var result = $.parseJSON(res);
					  if(result.code==200){
						  var vkey = result.data.vkey;
						  $("#vkey").val(vkey);
						  
						  $("#vcode").hide();
						  $("#countdown").show();
						  var count=60;
						  timer = setInterval(function() {
							count--;
							$("#countdown").val(count);
							if(count == 0) {
								clearInterval(timer); //清除计时器
								$("#vcode").show();
								$("#countdown").hide();
							}
						}, 1000);

					  }else{
						  alert(result.msg);
					  }
				  }
				});
			}
			else
				alert("请先填写手机号");
	  });
	});
	//获得地址栏参数
	function getUrlParam(name)
	{
		//构造一个含有目标参数的正则表达式对象
		var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
		//匹配目标参数
		var r = window.location.search.substr(1).match(reg);
		//返回参数值
		if (r!=null) return unescape(r[2]); return null;
	}
	//验证是否为空
	function check_null(id) {
		var text = $("#" + id).val();
		console.log(text);
		if (text == "") {
			$("#" + id).addClass('notice');
			return false;
		} else
			return true;
	}
</script>
<body>
    <div class="container">
        <div class="login-wrapper">
            <div class="header">注册账号</div>
            <div class="form-wrapper">
                <input type="text" name="username" placeholder="手机号" class="input-item" id="username">
                <input type="password" name="password" placeholder="密码" class="input-item" id="password">
				<div class="code-panel">
					<input type="text" name="captcha" placeholder="验证码" class="captcha" id="captcha">
					<input type="button" value="获取验证码" class="vcode" id="vcode">
					<input type="text" value="60" class="vcode hidden" id="countdown">
					<input type="hidden" id="vkey" name="vkey" value=""/>
				</div>
				
                <div class="btn" id="login">注册</div>
            </div>
            <div class="msg">
                是否已有账号?
                <a href="login.html">登录</a>
            </div>
        </div>
    </div>
</body>
</html>